import { Button, DatePicker, Select, Form, Icon, Input, Spin } from 'antd';
import React, { ReactNode } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import { setCommonFun } from '@/pages/finance/withdraw/utils';
import Mtable from '@/pages/finance/withdraw/components/Mtable';
import { getColumns } from './utils';
import styles from './style.less';

const { Option } = Select;

interface StateType {
  [propName: string]: any;
}

const { RangePicker } = DatePicker;
@setCommonFun
class D extends React.PureComponent<StateType> {
  public refMtable: any;

  public name: string = 'levelAdjustment';

  public columns: any = getColumns(this);

  state = {
    effectParams: {
      userId: this.props.data.id,
      optType: -1,
      startTime: moment('00:00:00', 'HH:mm:ss')
        .subtract(14, 'days')
        .format('YYYY-MM-DD HH:mm:ss'),
      endTime: moment('23:59:59', 'HH:mm:ss')
        .subtract(0, 'days')
        .format('YYYY-MM-DD HH:mm:ss'),
    },
  };

  constructor(props: any) {
    super(props);
    this.$httpUserLevelMnglog(this.state.effectParams);
  }

  setFiltersParams = (filtes: any, sorter: any, cb: any) => {
    if (cb) {
      cb();
    }
  };

  // 交易明细列表
  $httpUserLevelMnglog = (payload: any) => {
    this.props.dispatch({
      type: 'search/userLevelMnglog',
      payload,
    });
  };

  render(): ReactNode {
    const { getFieldDecorator } = this.props.form;
    const { effectParams } = this.state;
    const { userLevelMnglogList } = this.props.search;

    const orderTypeMap = [
      { key: 1, value: '存款' },
      { key: 2, value: '提现' },
      { key: 3, value: '转账' },
      { key: 4, value: '红利' },
      { key: 5, value: '返水' },
      { key: 6, value: '提现退回' },
      { key: 10, value: '减币' },
      { key: 11, value: '上分' },
      { key: 14, value: '加币' },
    ];

    const optTypeMap = [
      { key: -1, value: '全部' },
      { key: 0, value: '手工调整' },
      { key: 1, value: '系统调整' },
    ];

    return (
      <div className={styles.rechargeWrap}>
        <Spin spinning={false}>
          <Form
            layout="inline"
            onSubmit={(e: React.SyntheticEvent) => {
              if (this.refMtable) {
                this.refMtable.handleSubmit(e, this);
              }
            }}
            name="searchRecharge"
          >
            <Form.Item label="调整时间">
              {getFieldDecorator('range-time-picker', {
                initialValue: [
                  moment('00:00:00', 'HH:mm:ss').subtract(14, 'days'),
                  moment('23:59:59', 'HH:mm:ss').subtract(0, 'days'),
                ],
              })(
                <RangePicker
                  format="YYYY-MM-DD HH:mm:ss"
                  showTime={{
                    hideDisabledOptions: true,
                    defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
                  }}
                />,
              )}
            </Form.Item>
            <Form.Item label="调整方式">
              {getFieldDecorator('optType', {})(
                <Select style={{ width: 220 }} placeholder="选择审核记录" allowClear>
                  {optTypeMap.map((item: any) => (
                    <Option key={item.key} value={item.key}>
                      {item.value}
                    </Option>
                  ))}
                </Select>,
              )}
            </Form.Item>
            <Form.Item label="调整人">
              {getFieldDecorator('creator')(
                <Input
                  allowClear
                  type="userNumber"
                  placeholder="请输入提现单号"
                  autoComplete="off"
                />,
              )}
            </Form.Item>
            <Form.Item className={styles.rechargeBtns}>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
              <Button onClick={this.resetForm}>重置</Button>
            </Form.Item>
          </Form>

          <br />

          <Mtable
            columns={this.columns}
            effectType="search/userLevelMnglog"
            effectParams={effectParams}
            dataSource={userLevelMnglogList}
            dispatch={this.props.dispatch}
            setFiltersParams={this.setFiltersParams}
            setSubmitFormatParams={this.setSubmitFormatParams}
            scroll={{ x: 1530 }}
            ref={(element: ReactNode) => {
              this.refMtable = element;
            }}
          />
        </Spin>
      </div>
    );
  }
}

const C = Form.create({ name: 'searchWithdraw' })(D);

export default connect(({ search, global, loading }: any) => ({
  search,
  btns: global.btns,
}))(C);
